import React, { Component } from 'react';
import sets from './sets.module.css'
import { Select, Button, Table, Input, Space, Modal, Tag } from 'antd';
const { Option } = Select;
class SetStudent extends Component {
  state = {
    columns: [
      {
        title: '学号',
        dataIndex: 'studentid',
        key: 'studentid'
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '学历',
        dataIndex: 'education',
        key: 'education',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      },
      {
        title: '学院',
        dataIndex: 'school',
        key: 'school',
      },
      {
        title: '班级',
        dataIndex: 'classid',
        key: 'classid',
        render: (value) => this.state.classdata && this.state.classdata.map(item => {
          if (item.classid == value) return item.className
        })
      },
      {
        title: '课程',
        dataIndex: 'classid',
        key: 'classid',
        render: (value) => this.state.classdata && this.state.classdata.map(item => {
          if (item.classid == value) return item.course
        })
      },
      {
        title: '操作',
        key: 'classid',
        render: (value, item) => <Tag color="processing" onClick={() => [this.showModal(item), this.setState({ studentlist: item })]}>编辑</Tag>
      }
    ],
    studentName: '',
    data: '',
    classdata: '',
    educationdata: '',
    schoolid: 'all',
    courseid: 'all',
    educationid: 'all',
    schoollist: '',
    courselist: '',
    visible: false,
    SchoolList: '',
    studentlist: '',
    agelist: [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
    classlist: '',
    //编辑
    eidsex: '',
    eidedu: '',
    eidschool: '',
    eidage: '',
    eidclass: '未选择',
    eidid: ''

  }
  //学校
  handleChange1 = value => {
    this.setState({ schoolid: value, courseid: 'all' })
    this.changedata(this.state.SchoolList, value)
  }
  //课程
  handleChange2 = value => {
    this.setState({ courseid: value })
  }
  //学历
  handleChange3 = value => {
    this.setState({ educationid: value })
  }

  //更新数据
  changedata = (data, value) => {
    let schoollist = [];
    let courselist = [];
    data.forEach(item => {
      schoollist.push(item.schoolid)
      if (item.schoolid == value) {
        item.courseList.forEach(j => {
          courselist.push(j.txt)
        })
      }
    })
    this.setState({ schoollist, courselist })
    // , courselist
  }

  //搜索
  serachStudent = () => {
    const { studentName, schoolid, courseid, educationid } = this.state
    this.$httpReq(this.$api.searchStudent({ name: studentName, school: schoolid, course: courseid, education: educationid }), res => {
      this.setState({ data: res.data })
    })
  }
  //编辑
  handleChange4 = value => {
    this.setState({ eidsex: value })
  }
  handleChange5 = value => {
    this.setState({ eidedu: value })
  }
  handleChange6 = value => {
    this.setState({ eidschool: value })
    let classlist = []
    this.state.classdata.forEach(item => {
      if (item.school == value) {
        classlist.push(item.className)
      }
    })
    this.setState({ classlist })
  }
  handleChange7 = value => {
    this.setState({ eidage: value })
  }
  handleChange8 = value => {
    this.setState({ eidclass: value })
  }
  //弹层出现
  showModal = item1 => {
    this.setState({ eidsex: item1.sex, eidage: item1.age, eidschool: item1.school, eidedu: item1.education })
    let classlist = [];
    this.state.classdata && this.state.classdata.forEach(item => {
      if (item.school == item1.school) {
        classlist.push(item.className)
      }
      if (item.classid == item1.classid) {
        this.setState({ eidclass: item.className })
      }
    })
    this.setState({ classlist })
    this.setState({
      visible: true
    });
  };
  //点击确定时
  handleOk = e => {
    const { eidsex, eidage, eidschool, eidedu, eidclass } = this.state
    if (eidsex == '', eidage == '', eidschool == '', eidedu == '', eidclass == '未选择') {
      this.$message.warning('请输入完整信息')
      return
    }
    this.state.classdata.forEach(item => {
      if (item.className == eidclass && item.school == eidschool) {
        this.$httpReq(this.$api.setStudnet({ studentid: this.state.studentlist.studentid, sex: eidsex, education: eidedu, school: eidschool, age: eidage, classid: item.classid }), res => {
          const { code, msg } = res;
          if (code) {
            this.$httpReq(this.$api.getStudentList(), res => {
              const { code, data } = res;
              if (code) {
                const { studentData } = data
                this.setState({ data: studentData })
              }
            })
            this.$message.success(msg)
          }
        })
        return
      }
    })

    this.setState({
      visible: false,
    });
  };
  //点击取消时
  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };
  render() {
    const { columns, data, educationdata, schoollist, courselist, studentlist, schoolid, courseid, educationid, agelist, eidsex, eidedu, eidage, eidclass, eidschool, classlist } = this.state
    return <div className={sets.box}>
      <div style={{ padding: '15px 0px', position: 'relative' }}>
        学生名称：<Input placeholder="请输入关键字" style={{ width: 120, marginRight: '20px' }} onChange={e => this.setState({ studentName: e.target.value })} />
                  学院名称： <Select value={schoolid} style={{ width: 100, marginRight: '20px' }} onChange={this.handleChange1}>
          <Option value="all">全部</Option>
          {
            schoollist && schoollist.map(item => {
              return <Option value={item}>{item}</Option>
            })
          }
        </Select>
                  课程阶段： <Select value={courseid} style={{ width: 100, marginRight: '20px' }} onChange={this.handleChange2}>
          <Option value="all">全部</Option>
          {
            courselist && courselist.map(item => {
              return <Option value={item}>{item}</Option>
            })
          }
        </Select>
                  学历： <Select value={educationid} style={{ width: 100 }} onChange={this.handleChange3}>
          <Option value="all">全部</Option>
          {
            educationdata && educationdata.map(item => {
              return <Option value={item}>{item}</Option>
            })
          }
        </Select>
        <Button type="primary" className={sets.serachbtn} onClick={this.serachStudent}>搜索</Button>
      </div>
      <div className={sets.serachp}>
        <span className={sets.serachspan} onClick={() => this.props.history.push('/home/student/addStudent')}>添加学生</span>
      </div>
      <Table columns={columns} dataSource={data} pagination={{
        pageSize: 6
      }} />
      {/* 编辑 */}
      <Modal
        title="编辑"
        visible={this.state.visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <div style={{ margin: '15px 50px' }}>学号：<span>{studentlist.studentid}</span></div>
        <div style={{ margin: '15px 50px' }}>名字：<span>{studentlist.name}</span></div>
        <div style={{ margin: '15px 50px' }}>性别：<Select value={eidsex} style={{ width: 100 }} onChange={this.handleChange4}>
          <Option value='女'>女</Option>
          <Option value='男'>男</Option>
        </Select></div>
        <div style={{ margin: '15px 50px' }}>学历：<Select value={eidedu} style={{ width: 100 }} onChange={this.handleChange5}>
          {
            educationdata && educationdata.map(item => {
              return <Option value={item}>{item}</Option>
            })
          }
        </Select></div>
        <div style={{ margin: '15px 50px' }}>学院：<Select value={eidschool} style={{ width: 100 }} onChange={this.handleChange6}>
          {
            schoollist && schoollist.map(item => {
              return <Option value={item}>{item}</Option>
            })
          }
        </Select></div>
        <div style={{ margin: '15px 50px' }}>年龄：<Select value={eidage} style={{ width: 100 }} onChange={this.handleChange7}>
          {
            agelist.map(item => {
              return <Option value={item}>{item}</Option>
            })
          }
        </Select></div>
        <div style={{ margin: '15px 50px' }}>班级：<Select value={eidclass} style={{ width: 100 }} onChange={this.handleChange8}>
          {
            classlist && classlist.map(item => {
              return <Option value={item}>{item}</Option>
            })
          }
        </Select></div>
      </Modal>
    </div>
  }
  componentDidMount() {
    //获取学生数据
    this.$httpReq(this.$api.getStudentList(), res => {
      const { code, data } = res;
      if (code) {
        const { studentData, userData, classData } = data
        this.setState({ data: studentData })
        this.setState({ classdata: classData })
      }
    })
    //获取学历数据
    this.$httpReq(this.$api.getEducationList(), res => {
      const { code, data } = res;
      if (code) {
        this.setState({ educationdata: data })
      }
    })
    //获取学校数据
    this.$httpReq(this.$api.getSchoolList(), res => {
      const { code, data } = res;
      if (code) {
        this.setState({ SchoolList: data })
        this.changedata(data, this.state.schoolid)
      }
    })
  }

}
export default SetStudent
